<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
          <el-form ref="form" label-width="150px">
						<div class="taskInfo">
              <el-row>
                <el-col :span="5" v-for="(item,index) in photoData" :key="index" class="col">
                  <el-card :body-style="{ padding: '0px' }">
                    <div v-if="item.image.split('.')[4] == 'mp4'">
                      <video :src="item.image" class="image" preview="0" />
                        <div style="padding: 14px;">
                          <span>{{ item.nickName }}</span>
                          <div class="bottom clearfix">
                            <time class="time">{{ dateFormat(item.createTime)}}</time>
                          </div>
                        </div>
                    </div>
                    <div v-else>
                      <img :src="item.image" class="image" preview="0">
                        <div style="padding: 14px;">
                          <span>{{ item.nickName }}</span>
                          <div class="bottom clearfix">
                            <time class="time">{{ dateFormat(item.createTime)}}</time>
                          </div>
                        </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
						</div>
            <el-form-item class="item">
              <el-button @click="reback()">返回</el-button>
            </el-form-item>

            <div class="block paginationStyle">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pageNo"
                :page-sizes="[12]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.totalSize">
              </el-pagination>
            </div>
          </el-form>


				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	export default{
		name:'CategoryPhoto',
		methods: {
      dateFormat(time) {
        if(time==null){
          return null;
        }
        var date=new Date(time);
        var year=date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
                * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      },
      handleSizeChange(val){
        this.query.pageSize = val;
        this.loadData();
      },
      handleCurrentChange(val){
        this.query.pageNo = val;
        this.loadData();
      },
      loadData(){
        var that = this;
        this.$api.post('/photo/findbabyInfo',that.query,function(data){
          if(data.flag=="success"){
            that.query.totalSize = data.data.total;
            that.photoData = data.data.records;
            //console.log(that.photoData)
            /*for(var i=0;i<that.photoData.length;i++){
               //console.log(that.photoData[i]);
               for(let key in that.photoData[i]) {
                 console.log(key);
               }
            }*/
          }else{
            this.$message.error(data.msg);
          }
        });
      },
      reback(){
        this.$router.push('/photo/list');
      },
      loadData(){
        var that = this;
        this.$api.get('/photo/get/'+that.$route.params.id,that.query,function(data){
          if(data.flag=="success"){
            console.log(data)
            that.query.totalSize = data.data.totalPage;
            that.photoData = data.data.dataList;
          } else{
            that.$message.error(data.msg);
          }
        });
      }
		},
		mounted(){
      this.loadData();
		},
		data:function(){
			return {
				navs:["基础数据管理","用户相册数据","相册图片"],
				lev1Category:"",
				lev1Categorys:[],
				lev2Categorys:[],
        photoData:[],
        query:{
          pageNo:1,
          pageSize:12,
          totalSize:0
        }
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	.el-form-item i{
		font-size: 20px;
		font-weight: bold;
	}
	.el-form-item i:hover{
		cursor: pointer;
	}
  .img{
    margin-right: 20px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 300px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .col{
    margin-right: 42px;
    margin-bottom: 20px;
  }

  .paginationStyle{
    margin-top: 15px;
    float:right;
  }

  .item{
    float: left;
  }
</style>
